import React, {useEffect} from 'react';

import { Layout, theme } from 'antd';
import NavigateHeaderComponent from "./NavigateHeaderComponent";
import {Outlet, useLocation, useNavigate} from "react-router-dom";
import NavigateSiderComponent from "./NavigateSiderComponent";
import LogFactory from "log/LogFactory";
import System from "global/System";

const { Header, Content } = Layout;
const log = LogFactory.getLog("NavigateComponent.tsx");

const NavigateComponent: React.FC = () => {
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    const navigate = useNavigate();
    const location = useLocation();

    useEffect(() => {
        if (location.pathname === "/nav"){
            navigate(System.getInstance().getUserConfig().redirectPath) ;
        }
    }, []);

    return (
        <Layout hasSider>
            <NavigateHeaderComponent/>
            <NavigateSiderComponent/>
            <Layout style={{ marginLeft: 200,width: "100%",zIndex: "500",overflowX: "hidden" }}>
                <Header style={{ padding: 0, background: colorBgContainer }} />
                <Content
                    style={{
                       width: "100%",
                        overflowX: "hidden",
                    }}>
                    <Outlet/>
                </Content>
            </Layout>
        </Layout>
    );
};

export default NavigateComponent;